<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../fullcalendar.min.css"/>
    <link rel="stylesheet" type="text/css" href="../fullcalendar.print.min.css" media="print"/>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"/>
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../moment.min.js"></script>
    <script type="text/javascript" src="../fullcalendar.min.js"></script>
    <script type="text/javascript" src="../locale-all.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script>

        $(function() {

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                locale:"zh-cn",
                defaultDate: '2016-12-12',
                navLinks: true, // can click day/week names to navigate views
                selectable: true,
               // selectHelper: true,
                select: function(start, end) {
                    $('#event-dialog').dialog('open');
                },
                editable: true,
                //eventLimit: true, // allow "more" link when too many events
                events: '/htq-oa/event/list'
            });
            $('#event-dialog').dialog({
                title: '事件窗口',
                width: 400,
                height: 200,
                closed: true,
                cache: false,
                //href: 'get_content.php',
                modal: true,
                buttons:[{
                    text:'保存',
                    handler:function(){
                        var eventData={
                            title:$("#eventTitle").val(),
                            start:$('#eventStart').datetimebox('getValue'),
                            end:$('#eventEnd').datetimebox('getValue'),
                            content:$('#eventContent').val()
                        }
                        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                        $('#calendar').fullCalendar('unselect');
                        $.post("/htq-oa/event/save",eventData,function(data){
                            $('#event-dialog').dialog('close');
                            alert(JSON.stringify(data));
                        })
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $('#event-dialog').dialog('close');
                    }
                }]

            });

        });

    </script>
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>

</head>
<body>
<div id='calendar'></div>
<div id="event-dialog">
    事件标题：<input id="eventTitle" type="text" name="event.title"/><br/>
    事件内容：<textarea id="eventContent" name="event.content"></textarea><br/>
    开始时间：<input id="eventStart" class="easyui-datetimebox" name="event.startTime" data-options="required:true"><br/>
    结束时间：<input id="eventEnd" class="easyui-datetimebox" name="event.startTime" data-options="required:true">
</div>
</body>

</html>